import BaseModal from '@/components/common/mlsModal';
// import ReferAreaSelector from '../../../components/common/ReferAreaSelector';
import styles from './uploadPreviewModal.module.scss';
import { useEffect, useState, useCallback, useMemo } from 'react';
import { Button, Image, ButtonGroup } from '@douyinfe/semi-ui';

/**
 * 图片列表排序工具函数
 * @param {Array} imageList - 图片列表
 * @param {string|Function} sortOption - 排序选项：'none'不排序，'custom'自定义排序，或自定义排序函数
 * @param {Array} customOrder - 自定义排序顺序，如['AT', 'BT', 'CT']
 * @returns {Array} 排序后的图片列表
 */
const sortImageList = (imageList, sortOption = 'none', customOrder = []) => {
  // 如果不排序，直接返回原数组
  if (sortOption === 'none') {
    return [...imageList]; // 返回新数组避免修改原数组
  }

  // 如果是自定义排序函数，直接使用该函数
  if (typeof sortOption === 'function') {
    return [...imageList].sort(sortOption);
  }

  // 自定义顺序排序
  if (sortOption === 'custom' && customOrder.length > 0) {
    return [...imageList].sort((a, b) => {
      const indexA = customOrder.indexOf(a.key);
      const indexB = customOrder.indexOf(b.key);

      // 如果key不在自定义顺序中，放在最后
      if (indexA === -1 && indexB === -1) return 0;
      if (indexA === -1) return 1;
      if (indexB === -1) return -1;

      return indexA - indexB;
    });
  }

  // 默认按key字母顺序排序
  return [...imageList].sort((a, b) => a.key.localeCompare(b.key));
};

/**
 * 上传图片预览弹窗组件
 * @param {Object} props
 * @param {boolean} props.visible - 是否可见
 * @param {Function} props.onCancel - 取消回调
 * @param {Function} props.onConfirm - 确认回调
 * @param {Array} props.imageList - 预览图片列表，每个元素包含key、imageUrl、referType
 * @param {string} props.selectedKey - 选中的图片key
 * @param {string|Function} props.sortOption - 排序选项：'none'不排序，'custom'自定义排序，或自定义排序函数
 * @param {Array} props.customOrder - 自定义排序顺序，如['AT', 'BT', 'CT']
 */
function UploadPreviewModal({
  visible,
  onCancel,
  onConfirm,
  imageList,
  selectedKey,
  sortOption = 'none', // 默认不排序
  customOrder = [],
}) {
  // 添加状态管理，默认选中'主体'
  const [selectedType, setSelectedType] = useState('subject');
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  // 使用useMemo缓存排序后的图片列表，避免重复计算
  const sortedImageList = useMemo(() => {
    return sortImageList(imageList, sortOption, customOrder);
  }, [imageList, sortOption, customOrder]);

  // 直接使用sortedImageList，避免不必要的状态复制
  const imgList = sortedImageList;

  const handleTypeSelect = useCallback(type => {
    console.log(type);
    // 这里不需要更新imgList，因为referType的更新应该通过props回调传递给父组件
    // 或者使用独立的状态管理
    setSelectedType(type);
  }, []);

  const handleConfirm = useCallback(() => {
    // 确认时可以将选中的区域类型一并传递
    console.log('确认选择：', selectedKey, selectedType); // 添加调试日志
    onConfirm({
      imageList: imgList,
      selectedKey,
      selectedType,
    });
    setCurrentImageIndex(0);
    setSelectedType('subject');
  }, [selectedKey, selectedType, onConfirm, imgList]);

  useEffect(() => {
    console.log('selectedKey变化，更新当前图片索引');
    if (selectedKey) {
      const index = imgList.findIndex(item => item.key === selectedKey);
      if (index !== -1) {
        setCurrentImageIndex(index);
        // 同时更新selectedType为当前图片的referType
        if (imgList[index]?.referType) {
          setSelectedType(imgList[index].referType);
        }
      }
    }
  }, [selectedKey]);

  const handleChangeSelectedImage = useCallback((item, index) => {
    setCurrentImageIndex(index);
    // 切换图片时更新selectedType
    if (item.referType) {
      setSelectedType(item.referType);
    }
  }, []);

  const onPreviewCancel = useCallback(() => {
    setCurrentImageIndex(0);
    setSelectedType('subject');
    onCancel?.();
  }, [onCancel]);

  // 自定义底部内容，包含参考区域选择器
  const footerContent = (
    <div className={styles.customFooter}>
      <div className={styles.customFooterTitle}>
        <span>请选择参考区域:</span>
        <ButtonGroup>
          <Button
            className={selectedType === 'subject' ? styles.selectedButton : styles.unselectedButton}
            onClick={() => handleTypeSelect('subject')}>
            主体
          </Button>
          <Button
            className={
              selectedType === 'backGroud' ? styles.selectedButton : styles.unselectedButton
            }
            onClick={() => handleTypeSelect('backGroud')}>
            背景
          </Button>
        </ButtonGroup>
      </div>
      <div className={styles.bottomBox}>
        <div className={styles.imgPreviewWrapper}>
          {imgList.map((item, index) => (
            <Image
              key={item.imageUrl}
              src={item.imageUrl}
              preview={false}
              className={`${styles.imgPreview} ${
                currentImageIndex === index ? styles.selectedImgPreview : ''
              }`}
              draggable={false}
              onClick={() => handleChangeSelectedImage(item, index)}
            />
          ))}
        </div>

        <div className={styles.modalButtonGroup}>
          <Button onClick={onPreviewCancel} className={`${styles.button} button buttonDefault`}>
            取消
          </Button>
          <Button onClick={handleConfirm} className={`${styles.button} button buttonPrimary`}>
            确认
          </Button>
        </div>
      </div>
    </div>
  );

  return (
    <BaseModal
      visible={visible}
      onCancel={onPreviewCancel}
      // onConfirm={handleConfirm}
      title="参考图"
      footerContent={footerContent}
      modalProps={{ className: styles.uploadPreviewModal }}>
      {/* 可以在这里添加额外的预览内容 */}
      {imgList.length && (
        <div className={styles.mainPreviewContainer}>
          <Image
            // width={730}
            // height={540}
            src={imgList?.[currentImageIndex].imageUrl}
            preview={false}
            className={styles.mainPreviewImage}
            draggable={false}
          />
        </div>
      )}
    </BaseModal>
  );
}

export default UploadPreviewModal;
